<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="outBox">
      <div class="innerHTML1"></div>
      <div class="innerHTML2"></div>
    </div>
    <button onclick="add1()">addElement1</button>
    <button onclick="add2()">addElement2</button>
    <script>
      const outBox = document.querySelector('.outBox')
      const innterHTML1 = document.querySelector('.innerHTML1')
      const innterHTML2 = document.querySelector('.innerHTML2')
      const observer = new MutationObserver(mutations => {
        console.log(mutations)
      })
      const config = {
        attributes: true, // 监听属性变化
        childList: true, // 监听子节点变化
        //   characterData: true, // 监听文本内容变化
        subtree: true // 监听后代节点变化
      }
      observer.observe(outBox, config)
      //   observer.
      function add1() {
        innterHTML1.innerHTML = '123'
        innterHTML1.setAttribute('title', 'ff')
        innterHTML2.innerHTML = '456'
      }
      function add2() {
        innterHTML2.innerHTML = '456'
      }
    </script>
  </body>
</html>
